<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="筛选查询" name="1" class="clear">
        <div :model="formInline">
          <div id="phone">
            <span>用户id</span>
            <el-input v-model="formInline.search" placeholder="用户账号/手机号"></el-input>
          </div>
          <div id="yonghuid">
            <span>用户昵称</span>
            <el-input v-model="formInline.username" placeholder="用户昵称"></el-input>
          </div>
          <!-- 选择日期 -->
          <div class="block">
            <span class="demonstration">选择日期</span>
          <el-select v-model="formInline.select" class="input" slot="prepend" placeholder="请选择时间">
              <el-option label="2018" value="2018"></el-option>
              <el-option label="2019" value="2019"></el-option>
              <el-option label="2020" value="2020"></el-option>
          </el-select>
          </div>
        </div>

        <!-- 按钮 -->
        <el-row>
          <el-button type="info" plain id="btn1" @click="Reset">重置</el-button>
          <el-button type="info" id="btn2" @click="Screening">筛选</el-button>
        </el-row>
      </el-collapse-item>
      <div id="xia">
        <div id="datalist">
          <span>数据列表</span>
        </div>
        <div id="boddy">
          <!-- 导出按钮 -->
          <el-row id="daochu">
            <el-button @click="exportXLSX">导出</el-button>
          </el-row>

          <div id="piliang" class="clear">
            <button placeholder="用户昵称" @click="PiliangDel">批量操作</button>
          </div>
          <div id="paixu" class="clear">
            <span>排序方式</span>
            <el-select v-model="value1" placeholder="排序方式">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 表格 -->
        <el-table
          id="exportTab"
          ref="multipleTable"
          border
          :data="tableData"
          tooltip-effect="dark"
          :default-sort = "{prop: 'id', order: 'descending'}"
          style="width: 100%" @selection-change="selectCheck"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="序号" min-width="10%">
          </el-table-column>
          <el-table-column prop="name" label="用户昵称" min-width="10%">
          </el-table-column>
          <el-table-column prop="zhanghao" label="用户账号" min-width="15%">
          </el-table-column>
          <el-table-column prop="shouji" label="手机号" min-width="10%">
          </el-table-column>
          <el-table-column prop="time" label="注册时间" min-width="15%">
          </el-table-column>
          <el-table-column prop="jine" label="消费金额" min-width="10%">
          </el-table-column>
          <el-table-column prop="enable" label="账户可用状态" min-width="15%">
            <template slot-scope="scope">
              <el-switch 
                 v-model="scope.row.enable"
                @change="changeEnable(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="15%">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看详情</el-button
              >
              <el-button type="text" size="small" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" size="small" @click="open(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <span class="demonstration"></span>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="nowPage"
            :page-sizes="[5, 10]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalData.length"
          >
          </el-pagination>
        </div>
        <div>
          <el-dialog
            title="用户列表详情"
            :visible.sync="CheckDialogVisible"
            width="50%"
            :before-close="editClose"
          >
            <!-- 编辑信息表-->
            <el-form
              ref="editTableData"
              :model="editTableData"
              label-width="200px"
            >
              <el-form-item prop="id" label="序号">
                <el-input v-model="editTableData.id"></el-input>
              </el-form-item>
              <el-form-item prop="name" label="用户昵称">
                <el-input v-model="editTableData.name" width="200"></el-input>
              </el-form-item>
              <el-form-item prop="zhanghao" label="用户账号">
                <el-input v-model="editTableData.zhanghao" width="200"></el-input>
              </el-form-item>
              <el-form-item prop="shouji" label="手机号">
                <el-input v-model="editTableData.shouji" width="200"></el-input>
              </el-form-item>
              <el-form-item prop="time" label="注册时间" width="150">
                <el-input v-model="editTableData.time" width="200"></el-input>
              </el-form-item>
              <el-form-item prop="jine" label="消费金额" width="150">
                <el-input v-model="editTableData.jine" width="200"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="editClose">取 消</el-button>
              <el-button type="primary" @click="onEditOk">确 定</el-button>
            </span>
          </el-dialog>
        </div>
         <!-- 查看信息表-->
        <div>
          <el-dialog
            title="用户列表详情"
            :visible.sync="SeeDialogVisible"
            width="50%"
          >
            <el-form
              ref="seeTableData"
              :model="seeTableData"
              label-width="200px"
            >
              <el-form-item prop="name" label="用户昵称" >
                <el-input v-model="seeTableData.name" width="200" disabled></el-input>
              </el-form-item>
              <el-form-item prop="zhanghao" label="用户账号">
                <el-input v-model="seeTableData.zhanghao" width="200" disabled></el-input>
              </el-form-item>
              <el-form-item prop="shouji" label="手机号">
                <el-input v-model="seeTableData.shouji" width="200" disabled></el-input>
              </el-form-item>
              <el-form-item prop="time" label="注册时间">
                <el-input v-model="seeTableData.time" width="200" disabled></el-input>
              </el-form-item>
              <el-form-item prop="jine" label="消费金额">
                <el-input v-model="seeTableData.jine" width="200" disabled></el-input>
              </el-form-item>
            </el-form>
                  <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="onSeeOk">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </el-collapse>
  </div>
</template>
<script>
// 导出
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  data() {
    return {
      selection: [],
      totalData: [],
      nowPage: 1,
      count: 5,
      activeNames: ["1"],
      input: "",
      input1: "",
      input2: "",
      value1: true,
      enable: true,
      CheckDialogVisible: false,
      SeeDialogVisible: false,
      //  编辑表
      editTableData: {
        id: "",
        name: "",
        zhanghao: "",
        shouji: "",
        time: "",
        jine: "",
      },
      // 批量操作存数据
      batchDelFrom: {},
      // 查看表
      seeTableData: {
        id: "",
        name: "",
        zhanghao: "",
        shouji: "",
        time: "",
        jine: "",
      },
      // 筛选
         formInline: {
                search: "",
                username: "",
                select: "",
            },
            search: "",
      
      value0: "",

      options1: [
        {
          value: "选项1",
          label: "按消费金额倒序",
        },
        {
          value: "选项2",
          label: "按消费金额顺序",
        },
        {
          value: "选项3",
          label: "按注册时间倒序",
        },
        {
          value: "选项4",
          label: "按注册时间顺序",
        },
      ],
      value1: [],
      options: [
        {
          value3: "选项1",
          label: "删除",
        },
      ],
      value3: [],

      multipleSelection: [],
      value: "",
    };
  },

  mounted() {
    this.getUserList();
  },

  methods: {
    handleCurrentChange: function (val) {
      console.log(`当前页: ${val}`);
      this.nowPage = val;
    },

    // 获取数据
    getUserList() {
      // console.log("获取数据");
      this.$axios({
        url: "/user_list/getlist",
      }).then((res) => {
        this.totalData = res.data.data;
        console.log(res.data.data);
        let data = res.data.data;
         data.filter((v) => {
          if (v.enable == '是') {
            v.enable = true;
          } else {
            v.enable = false;
          };
        });
      });
    },

    // // 删除信息
    open(data) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.del(data);
      });
    },
    del(data) {
      this.$axios({
        url: "/user_list/getlist1",
        method: "post",
        data: data,
      }).then((res) => {
        this.getUserList();
        this.$message({
          message: "角色删除成功",
          type: "success",
        });
      });
    },
        // 批量删除
      PiliangDel() {
            this.$confirm("确认删除所选退款信息？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let str = "";
                for (let i = 0; i < this.batchDelFrom.length; i++) {
                    if (this.batchDelFrom[i].num) {
                        str = str + `"${this.batchDelFrom[i].name}"` + " ";
                    }
                }
                this.batchDel();
            });
        },
        batchDel() {
            this.$axios({
                url: "/user_list/Piliangshanchu",
                method: "post",
                data: this.batchDelFrom,
            }).then(() => {
                this.getUserList();
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
            });
        },
        selectCheck(selection) {
            this.batchDelFrom = selection;
        },
    // 启用按钮
    changeEnable(val) {
      if (val.enable) {
        val.enable = "是";
      } else {
        val.enable = "否";
      }
      this.$axios({
        url: "/user_list/changeEnable",
        method: "post",
        data: val,
      }).then(() => {
        if (val.enable == "是") {
          this.$message({
            message: "账户状态开启",
            type: "success",
          });
        } else {
          this.$message({
            message: "账户状态关闭",
            type: "warning",
          });
        }
        this.getUserList();
      });
    },
    // // 筛选方法
     Screening() {
            this.nowPage = 1;
         
            this.$axios({
                url: "/user_list/ListSelect",
                params: {
                    username: this.formInline.username,
                    search: this.formInline.search,
                    riqi: this.formInline.select,
                },
            }).then((res) => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.totalData = res.data.data;
                }
            });
        },
    // // 重置
    Reset() {
            this.nowPage = 1;
            this.formInline = {
                search: "",
            };
            this.search = "";

            this.getUserList();
    },

    editClose() {
      this.CheckDialogVisible = false;
    },
    // 编辑数据
    handleEdit(data) {
      this.CheckDialogVisible = true;
      console.log(data);
      this.editTableData = data;
    },
    onEditOk() {
      this.$axios({
        url: "/user_list/ModifyData",
        data: {
          id: this.editTableData.id,
          name: this.editTableData.name,
          zhanghao: this.editTableData.zhanghao,
          shouji: this.editTableData.shouji,
          time: this.editTableData.time,
          jine: this.editTableData.jine,
        },
        method: "post",
      }).then((res) => {
        this.editTableData = res.data.data;
        console.log(res);
        if (res.data.code == 200) {
          this.$message("修改成功", "success");
          this.CheckDialogVisible = false;
        }
      });
    },

exportXLSX () {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)
 
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
},


          // 查看数据
    
    handleClick(data) {
      this.SeeDialogVisible = true;
      console.log(data);
      this.seeTableData = data;
    },
    onSeeOk() {
      this.$axios({
        url: "/user_list/SeeList",
        data: {
          id: this.seeTableData.id,
          name: this.seeTableData.name,
          zhanghao: this.seeTableData.zhanghao,
          shouji: this.seeTableData.shouji,
          time: this.seeTableData.time,
          jine: this.seeTableData.jine,
        },
        method: "post",
      }).then((res) => {
        this.seeTableData = res.data.data;
        console.log(res);
        if (res.data.code == 200) {
          this.$message("查看用户列表数据成功！", "success");
          this.SeeDialogVisible = false;
        }
      });
    },

    // 导出
    
  },
  
  computed: {
    tableData() {
      return this.totalData.slice(
        (this.nowPage - 1) * this.count,
        this.nowPage * this.count
      );
    },
  },
};
</script>
<style lang="less" scoped>
::after {
  content: "";
  display: block;
  clear: both;
}
.el-main {
  overflow: visible;
}

/deep/.el-collapse-item_header {
  font-size: 20px;
  background: rgb(242, 242, 242);
}
[data-v-423de39f] .el-table {
  margin: 0;
}
#phone,
#yonghuid,
.block {
  width: 30%;

  float: left;
  margin: 0 20px;
}
#phone,
#yonghuid,
.block {
  margin-top: 20px;
  width: 30%;
}

#phone > span,
#yonghuid > span,
.block > span {
  float: left;
  line-height: 40px;
  font-size: 16px;
}
.el-input {
  width: 200px;
  margin: 0 10px;
}
/* 按钮 */
.el-row {
  width: 30%;
  padding-top: 40px;
  margin-left: 32%;
}
#btn1,
#btn2 {
  width: 100px;
  margin-left: 50px;
}
.cell {
  text-align: center;
  font-size: 10px;
}

#daochu {
  padding-top: 0;
  margin-left: 0;
}
#paixu,
#piliang {
  float: right;
}
#paixu > span,
#piliang > span {
  float: left;
  line-height: 55px;
}
#paixu > .el-select,
#piliang > button {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
#piliang > button{
  width: 100px;
  height: 38px;
  background-color: white;
  border: 1px solid rgb(192,196,204);
  border-radius: 5px;
}
#daochu {
  float: right;
  width: 70px;
  margin-top: 10px;
}
#boddy {
  margin-bottom: 20px;
}
.fenye {
  text-align: center;
  margin: 20px 0;
}
#xia {
  background-color: rgb(242, 242, 242);
}
#datalist {
  float: left;
}
#datalist > span {
  line-height: 40px;
}
</style>


<style lang="less" scoped>
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
  color: black;
  font-weight: 500;
}
/deep/.el-table .cell {
  text-align: center;
}
/deep/.el-collapse-item__header {
  font-size: 20px;
  background-color: rgb(242, 242, 242);
}
/deep/#datalist {
  font-size: 20px;
}
/deep/.el-table {
  margin: 20px;
}
.el-main {
  box-sizing: border-box;
}
/deep/.el-form .el-input__inner{
width: 500px;
}
</style>
<style>
.el-main {
  overflow: visible;
}
</style>